<template>
	<view>

		<view class="content">
			<view class="item">
				<text class="title" :style="{'--op':0}">1.反馈的业务</text>

				<view style="margin-left: 40upx;">
					<u-radio-group v-model="selType" placement="column" @change="groupChange">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in list" :key="index"
							activeColor="#12B9A3" :label="item" :name="item" @change="radioChange">
						</u-radio>
					</u-radio-group>
				</view>

			</view>

			<view class="item" style="margin-top: 0;margin-bottom: 0;">
				<text class="title">2.反馈内容</text>

				<view class="input-bg">
					<u--textarea v-model="remark" placeholder="请输入不少于5个字的描述，也可以上传相关页面截图有助于问题更快的解决..." count>
					</u--textarea>
				</view>

				<view style="margin: 20upx;">
					<u-upload :fileList="fileList5" @afterRead="afterRead" @delete="deletePic" name="5" multiple
						:maxCount="6"></u-upload>
				</view>

			</view>

			<view class="item pop-input">
				<text class="title">3.联系方式</text>
				<u-input v-model="phone" type="number" inputAlign="right" placeholder="请输入可以联系到您的手机号" border="bottom"
					clearable maxlength="11">
				</u-input>

			</view>


		</view>

		<view class="bottom-btn bottom">
			<text @click="btnClick">提交</text>
		</view>

	</view>
</template>

<script>
	import {
		sysfeedbacksubmit,
		uploadfiles
	} from '../../../common/api.js';

	export default {
		data() {
			return {
				list: ['经租', '直购', '以租代购', '融租', '其他'],
				selType: '经租',
				textareaValue: '',
				fileList5: [],
				baseImg: this.baseImageUrl,
				phone: '',
				remark: '',
			}
		},
		methods: {

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},

			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].thumb)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},

			uploadFilePromise(url) {
				let that = this
				return new Promise((resolve, reject) => {
					let a = uploadfiles({
						name: 'file',
						filePath: url,
					}).then(res => {
						// setTimeout(()=>{
							resolve(that.baseImg+res)
						// }, 1000)
					})
				})


				// return new Promise((resolve, reject) => {
				// 	let a = uni.uploadFile({
				// 		url: '', // 仅为示例，非真实的接口地址
				// 		filePath: url,
				// 		name: 'file',
				// 		formData: {
				// 			user: 'test'
				// 		},
				// 		success: (res) => {
				// 			setTimeout(() => {
				// 				resolve(res.data.data)
				// 			}, 1000)
				// 		}
				// 	});
				// })
				
			},

			btnClick() {

				if (uni.$u.test.isEmpty(this.remark)) {
					uni.showToast({
						icon: 'none',
						title: '请输入反馈内容',
					})
					return false;
				}

				if (this.remark.length < 5) {
					uni.showToast({
						icon: 'none',
						title: '请输入不少于5个字的描述'
					})
					return false;
				}

				if (!uni.$u.test.mobile(this.phone)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号',
					})
					return false;
				}
				
				console.log('数组', this.fileList5);

				let index = this.list.indexOf(this.selType) + 1;

				var pictures = '';
				if (this.fileList5.length > 0) {
					pictures = this.fileList5.map(item=>{
						return item.url = item.url.substring(this.baseImg.length, item.url.length)
					}).join(',')
				}


				sysfeedbacksubmit({
					fbType: index,
					feedbackContent: this.remark,
					pictures: pictures,
					phone: this.phone
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '提交成功',
					})

					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})
			}



		}
	}
</script>

<style lang="scss" scoped>
	.title {
		margin: 20upx;
		font-weight: bold;
		color: $black33;

		&::before {
			content: "*";
			color: $rede9;
			opacity: var(--op);
		}
	}

	.content {
		@include flex(column);

	}

	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 2;
	}

	.input-bg {
		margin: 0 20upx 10upx;
		border-radius: 5upx;
		border: solid 2upx $grayef;

	}

	.pop-input {
		@include flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30upx;
		color: $black33;
		margin-top: 25upx;
		margin-bottom: 130upx;
		padding: 10upx 10upx 10upx 0;
	}
</style>
